<template>
  <ul class="case-list">
    <li class="flex flex-between case-item" v-for="item in caseList" :key="item.url">
      <img :src="$utils.getImg(`${item.url}`)" width="427" height="540" alt="case" />
      <div class="case-item-right">
        <h2>{{ item.h2 }}</h2>
        <div>
          <h3>合作对象</h3>
          <p>{{ item.text1 }}</p>
        </div>
        <div>
          <h3>品牌支持</h3>
          <p>{{ item.text2 }}</p>
        </div>
        <div>
          <h3>服务内容</h3>
          <p>{{ item.text3 }}</p>
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({ name: 'CaseList' })
const caseList = ref([
  {
    url: 'case01.png',
    h2: '金融行业',
    text1:
      '中国银联、中国农业银行、中国邮政储蓄银行、中国银行、中国工商银行、交通银行、浦发银行、哈银消费金融公司、51信用卡',
    text2: '橙金融',
    text3:
      '橙券为客户搭建营销活动，银行的手机银行及网银用户可通过参与活动，获得不同频次抽奖礼券，凭抽奖礼券随机抽取话费、流量、星巴克等奖品，打造具有生动营销力的传播。'
  },
  {
    url: 'case02.png',
    h2: '互联网行业',
    text1: '腾讯、京东PLUS、支付宝、搜狐邮箱、好时巧克力、乐麦',
    text2: '橙营销',
    text3:
      '橙券为品牌线上商城旗舰店提供权益商品和技术支撑，多种选择，稳定货源支持，充分调动用户参与积极性，与用户形成良好互动，拉新促销，驱动企业业绩提升'
  },
  {
    url: 'case03.png',
    h2: '保险行业',
    text1: '中邮人寿、中德安联人寿、壹钱包',
    text2: '橙营销、橙金融',
    text3:
      '橙券，为保险行业客户策划精准有冲击力的营销活动，同时兼顾品牌信息传递和用户习惯的完美平衡，创意提供多面值话费、卡券产品等，覆盖更广泛的目标人群，实现流量快速转换'
  },
  {
    url: 'case04.png',
    h2: '通信行业',
    text1: '中国联通',
    text2: '橙积分',
    text3:
      '橙券充分整合360°客户视图，为联通的积分商城提供网票网、货拉拉、e袋洗等优质权益商品，并保障源源不断上新。用户在线兑换心仪商品，丰富且实用，有效提升用户个性化体验，充分发挥积分的价值。'
  },
  {
    url: 'case05.png',
    h2: '汽车行业',
    text1: '重庆长安汽车',
    text2: '橙积分',
    text3:
      '橙券，是长安商城积分兑换业务的提供商之一，为商城用户提供中石化加油卡充值与话费充值服务，让用户有了新的兑换选择，有助于用户留存，加强用户对品牌的友好度，快速提升品牌曝光度和流量。'
  },
  {
    url: 'case06.png',
    h2: '传媒行业',
    text1: '华数传媒、中科数创、瑞安日报、山东广播电视台',
    text2: '橙营销',
    text3:
      '橙券助力媒体行业深度营销，以数据产品的复合运用，实现程序化精准营销服务，根据品牌形象定制不同的视觉风格，形成具有互动性的曝光传播，帮助企业实现1'
  }
])
</script>

<style lang="scss" scoped>
.case-item {
  padding-bottom: 90px;
  .case-item-right {
    flex: 1;
    padding-left: 100px;
    color: #666;
    font-size: 14px;
    h2 {
      margin-bottom: 50px;
      font-size: 22px;
      color: #ff7200;
    }
    & > div {
      margin-bottom: 60px;
      h3 {
        margin-bottom: 10px;
        font-size: 20px;
        &::before {
          content: '';
          margin-right: 10px;
          display: inline-block;
          width: 3px;
          height: 20px;
          background: #ff7200;
        }
      }
    }
  }
}
</style>
